<template>
  <div class="content-wrapper">
    <ul>
      <div class="input-item">
        <input class="text-input" v-model="phone" placeholder="输入您的手机号" />
      </div>
      <div class="input-item">
        <input class="text-input" :type="pwdType" v-model="password" placeholder="输入您的登陆密码" />
        <img class="pwd-eye" src="../../assets/icon/icon_eye.png" @click='switchPwdType'  alt="" />
      </div>
    </ul>
    <div class="button-wrapper">
      <button type="button" @click="login" class="btn btn-large btn-red">登陆</button>
    </div>
    <div class="link-wrapper">
      <router-link to="/register">注册账号</router-link>
      <router-link to="/password/retrieve" class="right-link">忘记密码</router-link>
    </div>
    <div class="third-account">
      <p>使用其他第三方账号登陆</p>
      <div class="logos">
        <img @click="wechatLogin" src="../../assets/img/img_logo_wechat.png" />
      </div>
    </div>
    <div id="footer-obj" :class="['footer-wrapper', hideFooter ? 'hide' : '']">
      <span>书画点评网 2018 版权所有</span>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import qs from 'qs'

import util from '@/util/util'
import Config from '@/config/config'

export default {
  name: 'Login',
  data () {
    return {
      phone: '',
      password: '',
      pwdType: 'password',
      pageHeight: document.body.clientHeight,
      hideFooter: false 
    }
  },
  created() {
    this.setFooter()
  },
  methods: {
    switchPwdType: function() {
      if (this.pwdType == 'password') {
        this.pwdType = 'text'
      } else {
        this.pwdType = 'password'
      }
    },
    login: function () {
      if (!this.phone) {
        return this.$toast.fail('手机号不能为空')
      }
      if (!this.password || this.password.length < 6) {
        return this.$toast.fail('请输入符合要求的密码')
      }
      // var password = md5(md5(this.password))
      var params = {
        'phone': this.phone,
        'password': this.password,
      }
      this.$toast.loading({ duration: 0 })
      var that = this
      // 调用登陆接口
      this.axios.post('/users/login/', qs.stringify(params))
      .then(function (res) {
        that.$toast.clear()
        if (res.status === 200) {
          var payload = { userInfo: res.data, token: res.data.token }
          that.$store.dispatch('login', payload)
          if (util.isWechat()) {
            // 在微信内，做网页授权，获取微信openid
            var redirect_uri = Config.baseUrl
            /*
            if (typeof(that.$route.query.redirect) === 'undefined') {
              redirect_uri = Config.baseUrl + '/home'
            } else {
              redirect_uri = Config.baseUrl + that.$route.query.redirect
            }
            */
            var auth_url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + Config.appId + '&redirect_uri=' + redirect_uri + '&response_type=code&scope=snsapi_base&state=0#wechat_redirect'
            window.location.href = auth_url
          } else {
            if (typeof(that.$route.query.redirect) === 'undefined') {
              that.$router.replace('/home')
            } else {
              that.$router.go(-1)
            }
          }
        }
      })
      .catch(function (error) {
        that.$toast.clear()
        console.log(error)
        if (error.response) {
          that.$toast.fail(error.response.data.message)
        } else {
          that.$toast.fail('登陆失败')
        }
      })
    },
    wechatLogin: function() {
      if (util.isWechat()) {
        // 在微信内，做网页授权，获取微信openid
        var redirect_uri = Config.baseUrl
        /*
        if (typeof(this.$route.query.redirect) === 'undefined') {
        } else {
          redirect_uri = Config.baseUrl + this.$route.query.redirect
        }
        */
        var auth_url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + Config.appId + '&redirect_uri=' + redirect_uri + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
        window.location.href = auth_url
      } else {
        this.$toast.fail('请在微信中打开')
      }
    },
    setFooter: function() {
      var that = this
      window.onresize = function() {
        if (that.pageHeight > document.body.clientHeight) {
          that.hideFooter = true
        } else {
          that.hideFooter = false
        }
      }
    }
  }
}

</script>

<style lang="scss">
@import '../../assets/style/account.scss'
</style>
